<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>drag</title>
    <style type="text/css">
        #div1,#div2{
            width: 200px;
            height: 130px;
            border: 2px solid #d2d2d2;
            box-shadow: 1px 4px  8px #646464;
            display: inline-block;
        }
    </style>
    <script type="text/javascript">
        function drag(event) {
            event.effectAllowed="all";
            event.dataTransfer.setData("text/html",event.target.id);
        }
        function allowdrop(event) {
            event.preventDefault();
            event.dataTransfer.dropEffect="move";
        }
        function drop() {
            event.preventDefault();
            var data=event.dataTransfer.getData("text/html");
            event.target.appendChild(document.getElementById(data));
        }
        window.onload=function () {
            document.getElementById("dragimg").ondragstart=function () {
                drag(event);
            }
            document.getElementById("div1").ondrop=function () {
                drop(event);
            }
            document.getElementById("div1").ondragover=function () {
                allowdrop(event);
            }
            document.getElementById("div2").ondrop=function () {
                drop(event);
            }
            document.getElementById("div2").ondragover=function () {
                allowdrop(event);
            }
        }

    </script>
</head>
<body>
<div id="div1"><img src="../source/img/sara.jpg" draggable="ture" id="dragimg"></div>
<div id="div2"></div>
</body>
</html>